<template>
  <div>
    <el-form ref="formRef" :model="form" label-width="150px" :rules="rules">
      <el-form-item prop="id" label="Tag名称">
        <el-input v-model="form.id" :disabled="tagId !== ''" placeholder="请输入Tag名称" />
      </el-form-item>
      <el-form-item prop="tag_resource" label="Tag内资源">
        <el-select
          v-model="form.tag_resource"
          multiple
          filterable
          placeholder="请选择资源"
          style="width: 100%"
        >
          <el-option
            v-for="item in resList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="handleDialogClose">取消</el-button>
      <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button>
    </div>
  </div>
</template>

<script>
import { getTag, editTag, addTag } from '@/api/advanced'
import { vd } from '@/utils/validate'

export default {
  name: 'AddOrEditTag',
  props: {
    id: {
      type: String,
      default: ''
    },
    resList: {
      type: Array,
      required: true,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      tagId: this.id,
      form: {
        id: '',
        tag_resource: []
      },
      rules: {
        id: [vd.required, vd.alphanumeric, vd.startWithAlpha, vd.length(1, 20)],
        tag_resource: [vd.required]
      },
      loading: false
    }
  },
  mounted() {
    // 如果是编辑模式，获取Tag数据
    if (this.tagId) {
      this.getTagData()
    }
  },
  methods: {
    // 获取Tag数据
    getTagData() {
      getTag(this.tagId).then((res) => {
        if (res.data.action) {
          const data = res.data.data
          this.form.id = data.id
          this.form.tag_resource = data.tag_resource ? data.tag_resource.slice() : []
          console.log('获取到的Tag数据:', this.form)
        } else {
          this.$message.error(res.data.error || '获取数据失败')
        }
      }).catch((err) => {
        console.error('获取Tag数据失败:', err)
        this.$message.error('获取数据失败')
      })
    },

    // 表单提交
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.loading = true

          // 编辑模式
          if (this.tagId !== '') {
            editTag(this.tagId, this.form)
              .then((res) => {
                this.loading = false
                if (res.data.action) {
                  this.$message.success(res.data.info || '编辑Tag成功')
                  this.$emit('click', 'success')
                } else {
                  this.$message.error(res.data.error || '编辑Tag失败')
                  this.$emit('click')
                }
              })
              .catch((err) => {
                this.loading = false
                console.error('编辑Tag失败:', err)
                this.$message.error('编辑Tag失败')
                this.$emit('click')
              })
          } else {
            // 添加模式
            addTag(this.form)
              .then((res) => {
                this.loading = false
                if (res.data.action) {
                  this.$message.success(res.data.info || '添加Tag成功')
                  this.$emit('click', 'success')
                } else {
                  this.$message.error(res.data.error || '添加Tag失败')
                  this.$emit('click')
                }
              })
              .catch((err) => {
                this.loading = false
                console.error('添加Tag失败:', err)
                this.$message.error('添加Tag失败')
                this.$emit('click')
              })
          }
        }
      })
    },

    // 取消
    handleDialogClose() {
      this.$refs.formRef.resetFields()
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>
